<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="选择门店">
						<el-select v-model="state.param.store" placeholder="请选择门店">
							<el-option v-for="item in state.query.storeList" :key="item.id"
								:label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				
					<el-form-item label="商户编号">
						<el-input v-model="state.param.businessCode" placeholder="请输入商户编号" clearable></el-input>
					</el-form-item>
			
					<el-form-item label="终端编码">
						<el-input v-model="state.param.code" placeholder="请输入终端编码" clearable></el-input>
					</el-form-item>
			
					<el-form-item label="设备类型">
						<el-select v-model="state.param.store" placeholder="请选择设备类型">
							<el-option v-for="item in state.query.diviceType" :key="item.id"
								:label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				
					<el-form-item label="申请时间">
						<el-date-picker v-model="state.param.dateTime" type="daterange" unlink-panels :shortcuts="shortcuts"
							format="YYYY/MM/DD" value-format="YYYY-MM-DD" range-separator="-" :disabled-date="disabledDate"
							start-placeholder="开始日期" end-placeholder="结束日期" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData" style="width: 100%"> 
						<el-table-column label="ID" prop="cardItemName" />
						<el-table-column label="门店名称" prop="cellPrice" />
						<el-table-column label="商户号" prop="orderPrice" />
						<el-table-column label="交易金额(元)" prop="cellPrice" />
						<el-table-column label="手续费(元)" prop="buyCount"  />
						<el-table-column label="设备类型" prop="buyCount"  />
						<el-table-column label="交易类型" prop="buyCount"  />
						<el-table-column label="交易结果" prop="buyCount"  />
						<el-table-column label="支付时间" prop="buyCount"  />
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
								v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
								:total="state.total">
							</el-pagination>
						</el-col>
					</el-row> 
				</section>
			</el-card>
		</div>
	</div>
</template>

<script setup lang="ts" name="funCountup">
import {  onMounted, reactive, ref } from 'vue';

import type { storeNodeListData, channelListData } from "/@/types/order";

const state = reactive({
	dialogTitle: '',
	param: {
		dateTime: '',
		store: '',
		total: 0, 
		pageNum: 1,
		pageSize: 10,
		rowId: 0,  
		businessCode: '',
		code: ''
	},
	query: { 
		storeList: [] as Array<storeNodeListData>,
		diviceType: [] as any
	},
	loading: false,
	total: 0,
	tableData: [
		{
			id: 1,
			cardItemName: '测试',
			property: '属性名称',
			spec: '规格',
			salesVolume: '销量',
			cellPrice: '销售价格', 
			orderPrice: '销售金额',
			buyCount: '购买人数',
			coverRatio: '客户覆盖率',
			performanceRatio: '业绩占比',
			allRatio: '全款率',
			startTime: '2023-12-22 12:36:54',
			endTime: '2023-12-22 12:36:54', 
			status: '活动状态',
		}
	] as Array<any>
		
});

const cardDialogVisble = ref(false)
const status = ref(1)

const search = () => {}

const handleSizeChange = () => {}
const handleCurrentChange = () => {}
const previewInfo = (row: any) => {
	status.value = 1
	state.param.rowId = row.id
	cardDialogVisble.value = true
	// state.dialogTitle = row.cardItemName || ''
}

const disabledDate= (time: Date) => time.getTime() > Date .now();

const shortcuts = [
	{
		text: '本月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.setDate(1))
		return [start, end]
		},
	},
	{
		text: '近一个月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
		return [start, end]
		},
	},
	{
		text: '近三个月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
		return [start, end]
		},
	},
	{
		text: '近半年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
		return [start, end]
		},
	},
	{
		text: '近一年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
		return [start, end]
		},
	},
]

// 页面加载时
onMounted(() => {
});
</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>